<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>提示框效果</title>
	<style>
		#outer{
			width: 700px;
			height: 600px;
			margin: 30px 300px;
		}
		#in1 div{
			float: left;
			border: 1px solid pink;
			width: 120px;
			height: 120px;
			margin: 5px;
		}
		#in2 div{
			float: left;
			border: 1px solid pink;
			width: 120px;
			height: 120px;
			margin: 5px;
		}
		li{
			list-style: none;
			text-align: center;
			line-height: 30px;
			position: relative;
		}
		img{
			display: none;
			border: 1px solid #ccc;
			position: absolute;
			top: -15px;
			left: -15px;
		}
	</style>
	<script>
		window.onload = function(){
			var Oli = document.getElementsByTagName("li");
			var Oimg = document.getElementsByTagName("img");
			for (var i = 0; i < Oli.length; i++) {
				Oli[i].index = i;
				Oli[i].onmouseover = function(){
					Oimg[this.index].style.display = "block";
					Oimg[this.index].style.height = '150px';
					Oimg[this.index].style.width = '150px';
				}
			    Oli[i].onmouseout = function(){
					Oimg[this.index].style.display = "none";
					
				}	
			}
		}
	</script>
</head>
<body>
	<div id="outer">
		<div id="in1">
			<div>
			    <li>BWN <img src="E:\001练习\04-21\img\001.jpg" alt=""></li>
			 
			</div>	
			<div>
				<li>BWN<img src="E:\001练习\04-21\img\002.jpg" alt=""></li>
			    
			</div>	
			<div>
				<li>BWN<img src="E:\001练习\04-21\img\003.jpg" alt=""></li>
			    
			</div>	
			<div>
				<li>BWN<img src="E:\001练习\04-21\img\004.jpg" alt=""></li>
			   
			</div>	
			<div>
				<li>BWN<img src="E:\001练习\04-21\img\005.jpg" alt=""></li>
		    </div>
		 </div>   
		<div id="in2">
			<div>
			    <li>BWN <img src="E:\001练习\04-21\img\006.jpg" alt=""></li>
			 
			</div>	
			<div>
				<li>BWN<img src="E:\001练习\04-21\img\007.jpg" alt=""></li>
			    
			</div>	
			<div>
				<li>BWN<img src="E:\001练习\04-21\img\008.jpg" alt=""></li>
			    
			</div>	
			<div>
				<li>BWN<img src="E:\001练习\04-21\img\009.jpg" alt=""></li>
			   
			</div>	
			<div>
				<li>BWN<img src="E:\001练习\04-21\img\010.jpg" alt=""></li>
			   
			</div>	
		</div>
	</div>
</body>
</html>